<template>
    <div class="flex_1">
        <div v-if="props.fromData.price_type == 2 || props.fromData.price_type == 3 || props.fromData.price_type == 5 || props.fromData.price_type == 6 || props.fromData.price_type == 7 || props.fromData.price_type == 10 || props.fromData.price_type == 11 || props.fromData.price_type == 19 || props.fromData.price_type == 18 || props.fromData.price_type == 4">
            <div class="" style="padding-top: 20px;margin-left: 10px;" v-for="(items,indexs) in popData" :key="indexs">
                <div class="flex align_center" style="margin-bottom: 2%;" v-if="items.transport_type == 2">
                    <div style="width: 80px;">整车：</div>
                    <div class="flex align_center" style="margin-right:  200px;" v-if="items.is_goods == 0">
                        <a-input v-model="items.price" style="width: 100px;" placeholder="金额" allow-clear  />
                        <div style="margin: 0 12px;"> 元/ </div>
                        <a-select v-model="items.unit" style="width: 100px;" placeholder="单位">
                            <a-option v-for="item of zhengcheUnitList" :value="item.id" :label="item.name"  />
                        </a-select>
                    </div>
                    <div class="flex align_center" style="" v-if="(props.fromData.price_type == 2 || props.fromData.price_type == 3)">
                        <a-checkbox-group v-model="items.flag" :options="flagList" @change="handlechange($event,indexs)"></a-checkbox-group>
                    </div>
                </div>
                <div class="flex " style="margin-bottom: 2%;" v-if="items.transport_type == 1">
                    <div style="width: 80px;">集装箱：</div>
                    <div class="flex align_end flex_1">
                        <div style="margin-right: 90px;" v-if="items.is_goods == 0">
                            <div class="flex align_center" v-for="(item,index) in items.box" :key="index" style="margin-bottom: 2%;">
                                <div style="margin-right:12px;"> {{ item.box_size == 1?'20英尺':'40英尺' }} </div>
                                <a-input v-model="item.price" style="width: 100px;margin-left: 12px;" placeholder="金额" allow-clear  />
                                <div style="margin: 0 12px;"> 元/ </div>
                                <a-select v-model="item.unit" style="width: 100px;" placeholder="单位">
                                    <a-option v-for="items of props.unitList" :value="items.id" :label="items.name"  />
                                </a-select>
                            </div>
                        </div>
                        
                        <div class="flex align_center"  v-if="props.fromData.price_type == 2 || props.fromData.price_type == 3">
                            <a-checkbox-group v-model="items.flag" :options="flagList" @change="handlechange($event,indexs)"></a-checkbox-group>
                        </div>
                    </div>
                </div>
                <div class="flex align_center" v-if="items.transport_type == 3">
                    <div style="width: 80px;">批量快运：</div>
                    <div class="flex align_center" style="margin-right: 20px;" v-if="items.is_goods == 0">
                        <a-input v-model="items.price" style="width: 100px;" placeholder="金额" allow-clear  />
                        <div style="margin: 0 12px;"> 元/ </div>
                        <a-select v-model="items.unit" style="width: 100px;" placeholder="单位">
                            <a-option v-for="item of zhengcheUnitList" :value="item.id" :label="item.name"  />
                        </a-select>
                        <div class="flex align_center" style="margin-left: 12px;" v-if="props.fromData.price_type == 2 || props.fromData.price_type == 3">
                            <div style="margin-right: 12px;">不足</div>
                            <a-input v-model="items.limit_weight" style="width: 100px;margin-right: 12px;" placeholder="重量" allow-clear  />
                            <div>吨，按此重量作为最低重量计费</div>
                        </div>
                        
                    </div>
                    <div class="flex align_center" style="margin-left: 20px;" v-if="props.fromData.price_type == 2 || props.fromData.price_type == 3">
                        <a-checkbox-group v-model="items.flag" :options="flagList" @change="handlechange($event,indexs)"></a-checkbox-group>
                    </div>
                </div>
            </div>
        </div>
        
        <div v-if="props.fromData.price_type == 20 || props.fromData.price_type == 17 || props.fromData.price_type == 12 ">
            <div class="" style="padding-top: 20px;margin-left: 10px;" v-for="(items,indexs) in popData" :key="indexs">
                <div class="flex " style="margin-bottom: 2%;" v-if="items.transport_type == 1">
                    <div style="width: 80px;">集装箱：</div>
                    <div class=" flex_1">
                        <div class="flex" style="margin-bottom: 2%;" >
                            <div>选择计费方式：</div>
                            <a-radio-group v-model="items.jieti_time" :options="jietiTimeList" >
                                <template #label="{ data }">
                                    <div>{{ data.title }}</div>
                                </template>
                            </a-radio-group>
                        </div>
                        <div class="flex">
                            <div class="flex_1 flex" v-for="(item,index) in items.jieti_data" :key="index">
                                <div>{{ index == 0?'20英尺：':'40英尺：' }}</div>
                                <div class="flex_1">
                                    <div class="flex align_center" style="margin-bottom: 2%;"  v-for="(ite,ind) in item" :key="ind">
                                        <a-input v-model="ite.start" style="width: 80px;" :placeholder="items.jieti_time == 1?'天':'小时'" allow-clear  />
                                        <div style="margin: 0 12px;"> - </div>
                                        <a-input v-model="ite.end" style="width: 80px;" :placeholder="items.jieti_time == 1?'天':'小时'" allow-clear  />
                                        <div style="margin: 0 12px;"> {{items.jieti_time == 1?'天':'小时'}} </div>
                                        <a-input v-model="ite.price" style="width: 80px;" placeholder="金额" allow-clear  />
                                        <div style="margin: 0 12px;"> 元/ </div>
                                        <a-select v-model="ite.unit" style="width: 80px;" placeholder="单位">
                                            <a-option v-for="itemsx of props.unitList" :value="itemsx.id" :label="itemsx.name"  />
                                        </a-select>
                                        <a-button type="text" @click="handleDel(indexs,index,ind)" v-if="ind != 0 ">删 除</a-button>
                                    </div>
                                    <a-button type="primary" @click="handleAddOvertime(indexs,index)">新 增</a-button>
                                </div>
                            </div>
                        </div>
                        
                        
                    </div>
                </div>
                <div class="flex " style="margin-bottom: 2%;" v-if="items.transport_type == 2">
                    <div style="width: 80px;">整车：</div>
                    <div class=" flex_1">
                        <div class="flex" style="margin-bottom: 2%;" >
                            <div>选择计费方式：</div>
                            <a-radio-group v-model="items.jieti_time" :options="jietiTimeList" >
                                <template #label="{ data }">
                                    <div>{{ data.title }}</div>
                                </template>
                            </a-radio-group>
                        </div>
                        <div class=" " v-for="(item,index) in items.jieti_data" :key="index">
                            <div class="flex align_center" style="margin-bottom: 2%;"  >
                                <a-input v-model="item.start" style="width: 80px;" :placeholder="items.jieti_time == 1?'天':'小时'" allow-clear  />
                                <div style="margin: 0 12px;"> - </div>
                                <a-input v-model="item.end" style="width: 80px;" :placeholder="items.jieti_time == 1?'天':'小时'" allow-clear  />
                                <div style="margin: 0 12px;"> {{items.jieti_time == 1?'天':'小时'}} </div>
                                <a-input v-model="item.price" style="width: 80px;" placeholder="金额" allow-clear  />
                                <div style="margin: 0 12px;"> 元/ </div>
                                <a-select v-model="item.unit" style="width: 80px;" placeholder="单位">
                                    <a-option v-for="itemsx of zhengcheUnitList" :value="itemsx.id" :label="itemsx.name"  />
                                </a-select>
                                <a-button type="text" @click="handleDels(indexs,index)" v-if="index != 0 ">删 除</a-button>
                            </div>
                        </div>
                        <a-button type="primary" @click="handleAddOvertimes(indexs)">新 增</a-button>
                    </div>
                </div>
                <div class="flex " style="margin-bottom: 2%;" v-if="items.transport_type == 3">
                    <div style="width: 80px;">批量快运：</div>
                    <div class=" flex_1">
                        <div class="flex" style="margin-bottom: 2%;" >
                            <div>选择计费方式：</div>
                            <a-radio-group v-model="items.jieti_time" :options="jietiTimeList" >
                                <template #label="{ data }">
                                    <div>{{ data.title }}</div>
                                </template>
                            </a-radio-group>
                        </div>
                        <div class=" " v-for="(item,index) in items.jieti_data" :key="index">
                            <div class="flex align_center" style="margin-bottom: 2%;"  >
                                <a-input v-model="item.start" style="width: 80px;" :placeholder="items.jieti_time == 1?'天':'小时'" allow-clear  />
                                <div style="margin: 0 12px;"> - </div>
                                <a-input v-model="item.end" style="width: 80px;" :placeholder="items.jieti_time == 1?'天':'小时'" allow-clear  />
                                <div style="margin: 0 12px;"> {{items.jieti_time == 1?'天':'小时'}} </div>
                                <a-input v-model="item.price" style="width: 80px;" placeholder="金额" allow-clear  />
                                <div style="margin: 0 12px;"> 元/ </div>
                                <a-select v-model="item.unit" style="width: 80px;" placeholder="单位">
                                    <a-option v-for="itemsx of zhengcheUnitList" :value="itemsx.id" :label="itemsx.name"  />
                                </a-select>
                                <a-button type="text" @click="handleDels(indexs,index)" v-if="index != 0 ">删 除</a-button>
                            </div>
                        </div>
                        <a-button type="primary" @click="handleAddOvertimes(indexs)">新 增</a-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { defineProps, defineEmits, ref, reactive, onMounted,watch,watchEffect } from "vue";
    const emit = defineEmits(["update"]);
    const props = defineProps({
        fromData:{
            type: Object,
            default:{},
        },
        josnData:{
            type: Array,
            default:[], 
        },
        unitList:{
            type: Array,
            default:[], 
        }
    })
    const zhengcheUnitList = ref([
        {id: 1,name: "吨"},
        {id: 2,name: "车"},
        {id: 5,name: "吨/天"},
        {id: 6,name: "车/天"},
        {id: 8,name: "车/小时"},
        {id: 9,name: "天"},
        {id: 10,name: "小时"},
    ])
    
    const popData = ref([])
    watch(()=>popData.value,(newValue,oldValue)=>{
        emit('update',newValue)
    }, {
      deep: true, // 开启深度监听
    })
    watchEffect(() => {
        console.log(props.josnData)
        popData.value = props.josnData
    });
    onMounted(()=>{
        // if(props.formData.price_type == 1){
        //     props.formData.price_config = {

        //     }
        // }
    })
    const handleAddOvertime = (indexs,index)=>{
        popData.value[indexs].jieti_data[index].push({
              box_size: index + 1,
              price: '',
              unit: "",
              range:'',
              start:'',
              end:''
            })
    }
    const handleAddOvertimes = (indexs)=>{
        popData.value[indexs].jieti_data.push({
              price: '',
              unit: "",
              range:'',
              start:'',
              end:''
            })
    }
    const handleDels = (indexs,index) =>{
        popData.value[indexs].jieti_data.splice(index,1)
    }
    const handleDel = (indexs,index,ind) =>{
        popData.value[indexs].jieti_data[index].splice(ind,1)
    }
    const handlechange = (e,index)=>{
        if(e.length != 0){
            popData.value[index].is_goods = 1
        }else{
            popData.value[index].is_goods = 0
        }
    }
    const flagList =  ref([
        {value: "1",label: "按品名装卸费率计算"},
    ])
    const car = ref({
        transport_type:2,
        money:'',
        company:'',
        flag:[],
    })
    const box = ref({
        transport_type:1,
        box:[
            {
                boxType:'',
                money:'',
                company:'',
            },
            {
                boxType:'',
                money:'',
                company:'',
                
            },
        ],
        flag:[],
    })
    const piliang = ref({
        money:'',company:'',min_weight:'',flag:[],transport_type:3,
    })
    
    const boxTypeList =  ref([
        {key: "20英尺",title: "20英尺"},
        {key: "40英尺",title: "40英尺"},
    ])
    const jietiTimeList = ref([
        {
            value:1,title:'天'
        },
        {
            value:2,title:'小时'
        },
    ])
</script>

<style lang="less" scoped>

</style>